<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import resize from '../mixins/resize'

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      let img = new Image();
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      img.onload = function () {
        let width = canvas.width = img.width;
        let height = canvas.height = img.height;
        ctx.drawImage(img, 0, 0, width, height);
        let imgData = ctx.getImageData(0, 0, width, height);

        let data = [];
        for (let i = 0; i < imgData.data.length / 4; i++) {
          let r = imgData.data[i * 4];
          let g = imgData.data[i * 4 + 1];
          let b = imgData.data[i * 4 + 2];

          let lum = 255 - (0.2125 * r + 0.7154 * g + 0.0721 * b);
          lum = (lum - 125) / 10 + 50;
          data.push([i % width, height - Math.floor(i / width), lum]);
        }


        this.chart.setOption( {
          tooltip: {},
          backgroundColor: '#fff',
          xAxis3D: {
            type: 'value'
          },
          yAxis3D: {
            type: 'value'
          },
          zAxis3D: {
            type: 'value',
            min: 0,
            max: 100
          },
          grid3D: {
            axisPointer: {
              show: false
            },
            viewControl: {
              distance: 100
            },
            postEffect: {
              enable: true
            },
            light: {
              main: {
                shadow: true,
                intensity: 2
              },
              ambientCubemap: {
                texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
                exposure: 2,
                diffuseIntensity: 0.2,
                specularIntensity: 1
              }
            }
          },
          series: [{
            type: 'surface',
            silent: true,
            wireframe: {
              show: false
            },
            itemStyle: {
              color: function (params) {
                let i = params.dataIndex;
                let r = imgData.data[i * 4];
                let g = imgData.data[i * 4 + 1];
                let b = imgData.data[i * 4 + 2];
                return 'rgb(' + [r, g, b].join(',') + ')';
              }
            },
            data: data
          }]
        });
      }

    }
  }
}
</script>
